// 导入路由组件库
import {
  // BrowserRouter as Router,
  Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';
import { customeHistory } from './utils/history';

import { isAuth } from './utils';

// 业务组件
import { Home } from '@/pages/Home/Home';
import { Login } from '@/pages/Login/Login';
import { NotFound } from '@/pages/NotFound/NotFound';

import './App.scss';

function App() {
  return (
    <div className="app">
      <Router history={customeHistory}>
        <Switch>
          {/* ‘/’ 重定向到 ‘/home’ */}
          {/* 方式1，直接使用 Redirect 组件 */}
          {/* <Redirect exact path={'/'} to={'/home'} /> */}
          {/* 方式2，使用Route的render属性 */}
          <Route exact path={'/'} render={() => <Redirect to={'/home'} />} />
          {/* <Route path={'/home'} component={Home} /> */}
          {/* 路由鉴权 Route 组件的 render 属性 */}
          <Route
            path={'/home'}
            render={(props) => {
              // console.log('==>>>', props)
              // 判断用户是否登录
              if (isAuth()) {
                return <Home {...props} />;
              } else {
                // 重定向到login页面
                return (
                  <Redirect
                    to={{
                      pathname: '/login',
                      state: {
                        from: props.location.pathname,
                      },
                    }}
                  />
                );
              }
            }}
          />
          <Route path={'/login'} component={Login} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;
